<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >
    let VSHADER_SOURCE=`
    attribute vec4 a_position;
    attribute float a_pointSize;
    void main(){
        gl_Position=a_position;
        gl_PointSize=a_pointSize;
    }`
    let FSHADER_SOURCE=`
    void main(){
        gl_FragColor=vec4(1.0,0.3,0.3,1.0);
    }`

    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let n=initVertexBuffers(gl)
        if(n<0){
            console.log('设置顶点位置失败')
            return;
        }
        gl.clearColor(1.0,1.0,0.0,1.0)
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawArrays(gl.POINT,0,n);

    }

    function initVertexBuffers(gl){
        let verticesSizes=new Float32Array([0.0,0.3,10.0, -0.3,0.0,15.0, 0.3,0.0,18.0])
        let n=3;
        
        let vertexSizeBuffer=gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER,vertexSizeBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,verticesSizes,gl.STATIC_DRAW);
        // 从BYTE_PER_ELEMENT属性获取数组中每个元素所占的字节数
        let FSIZE=verticesSizes.BYTES_PER_ELEMENT;
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        // location  指定待分配的attribute变量的存储位置
        // size      指定缓冲区中每个顶点的分量个数
        // type      数据格式
        // normalize boolean,表明是否将非浮点型的数据归一化到[0,1]或[-1.1]
        // stride    指定相邻两顶点间的字节数，即每个顶点有多少个数据
        // offset    指定缓冲区中对象的偏移量，即当前考虑的数据量距离首个元素的距离
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,FSIZE*3,0)
        gl.enableVertexAttribArray(a_position);

        let a_pointSize=gl.getAttribLocation(gl.program,'a_pointSize');
        gl.vertexAttribPointer(a_pointSize,1,gl.FLOAT,false,FSIZE*3,FSIZE*2);
        gl.enableVertexAttribArray(a_pointSize)
        
        return n;
    }
   


</script>

</body>
</html>